<!DOCTYPE html>
<html class="pixel-ratio-1"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>生成海报</title>
    <link rel="stylesheet" href="__PUBLIC__/index/files/weui.css">
    <link rel="stylesheet" href="__PUBLIC__/index/files/jquery-weui.css">
    <link rel="stylesheet" href="__PUBLIC__/index/files/cropper.css">
    <link rel="stylesheet" href="__PUBLIC__/index/files/myCrop.css">
    <link rel="shortcut icon" href="https://vote.eyuyao.com/public/favicon.ico">
    <style type="text/css">
        html{max-width: 640px;margin: auto;background: #edecf2;}
        .clear{clear:both;}
        .compute-height{width:100%;max-width: 640px;}
    </style>
</head>
<body onresize="change_resize();">
<div id="generate" style="position: relative;">
    <img src="__PUBLIC__/index/files/poster-bg.jpg" >
    <div style="position: absolute; top: 341.333px; text-align: center; color: rgb(204, 204, 204);" class="compute-height" data-old-top="200" id="photo_btn_2" onclick="">
        <input id="inputImage" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="display: none;" type="file">
        <div style="width:80px;font-size: 30px;margin: auto;">选择头像</div>
    </div>
    <div style="position: absolute; top: 238.933px;" class="compute-height" data-old-top="140">
        <div style="width: 60%;margin: auto;">
            <img id="showImg" style="width: 100%; float: left;" src=""><div style="clear: both;"></div>
        </div>
    </div>
   <!--  <div style="position: absolute; top: 682.667px; width: 60%; left: 15%;" class="compute-height" data-old-top="400">
        <div style="font-size:12px;">大家好，我是</div>
        <div style="font-size: 20px;">{$active.contestant_number}号   {$active.nickname}</div>
        <div style="font-size:12px;">我正在参加乐清市上班族</div>
        <div style="font-size:12px;color:red;width:80px;">我想说：</div><div style="font-size:12px;">{$active.xuanyan}</div>
    </div> -->
    <div style="position: absolute; top: 682.667px;" class="compute-height" data-old-top="400">
        <div style="width:17%;position: absolute;right:6%;top:50px;">
            <img src="{$url}" style="width:100%;float: left;">
            <div style="clear: both;"></div>
        </div>
    </div>
    <div style="position:fixed;left:10px;bottom:0;">
        <!--<div class="item" style="width:50px;margin-bottom: 10px;" onclick="document.getElementById('inputImage').click()">
            <img src="/public/index/images/kaishu/select.png" style="width: 100%;float: left;"/>
            <div class="clear"></div>
        </div>-->
        <div class="item" style="width:50px;margin-bottom: 10px;" id="photo-btn">
            <img src="__PUBLIC__/index/files/select.png" style="width: 100%;float: left;">
            <div class="clear"></div>
        </div>
                <div class="item" style="width:50px;margin-bottom: 10px;" id="create-poster-btn">
            <img src="__PUBLIC__/index/files/share.png" style="width: 100%;float: left;">
            <div class="clear"></div>
        </div>
                <div class="item" style="width:50px;margin-bottom: 10px;" onclick="history.go(-1);">
            <img src="__PUBLIC__/index/files/index.png" style="width: 100%;float: left;">
            <div class="clear"></div>
        </div>
    </div>
    </div>
<div id="photo" class="weui-popup__container" style="display: none;">
    <div class="weui-popup__modal">
        <div style="position: absolute;top:0;left:0;">
            <div class="row" id="imgEdit">
                <div class="col-md-9">
                    <div class="img-container">
                        <img src="__PUBLIC__/index/files/1519455562113416242.jpg" alt="Picture" class="cropper-hidden">
                        <div class="cropper-container cropper-bg" style="width: 1233px; height: 678px;"><div class="cropper-wrap-box"><div class="cropper-canvas" style="width: 508.5px; height: 678px; left: 413.1px; top: 11px;">

                        <img crossorigin="anonymous" src="__PUBLIC__/index/files/1519455562113416242.jpg" style="width: 508.5px; height: 678px; margin-left: 0px; margin-top: 0px; transform: none;">

                        </div></div><div class="cropper-drag-box cropper-modal cropper-move" data-action="move"></div><div class="cropper-crop-box" style="width: 406.8px; height: 406.8px; left: 413.1px; top: 135.6px;"><span class="cropper-view-box">

                        <img crossorigin="anonymous" src="__PUBLIC__/index/files/1519455562113416242.jpg" style="width: 508.5px; height: 678px; margin-left: 0px; margin-top: -124.6px; transform: none;"></span><span class="cropper-dashed dashed-h cropper-hidden"></span><span class="cropper-dashed dashed-v cropper-hidden"></span><span class="cropper-center"></span><span class="cropper-face cropper-move" data-action="move"></span><span class="cropper-line line-e cropper-hidden" data-action="e"></span><span class="cropper-line line-n cropper-hidden" data-action="n"></span><span class="cropper-line line-w cropper-hidden" data-action="w"></span><span class="cropper-line line-s cropper-hidden" data-action="s"></span><span class="cropper-point point-e cropper-hidden" data-action="e"></span><span class="cropper-point point-n cropper-hidden" data-action="n"></span><span class="cropper-point point-w cropper-hidden" data-action="w"></span><span class="cropper-point point-s cropper-hidden" data-action="s"></span><span class="cropper-point point-ne cropper-hidden" data-action="ne"></span><span class="cropper-point point-nw cropper-hidden" data-action="nw"></span><span class="cropper-point point-sw cropper-hidden" data-action="sw"></span><span class="cropper-point point-se cropper-hidden" data-action="se"></span></div></div>
                    </div>
                </div>
            </div>
            <div class="row" id="actions" style="padding: 0;margin: 0;width: 100%;position: fixed;bottom: 5px;">
                <div class="col-md-9 docs-buttons">
                    <div class="button_sp_area">
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default close-popup">取消</a>
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" id="getCroppedCanvas" data-method="getCroppedCanvas">确认</a>
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary qiehuan" style="display: none;">换一张</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__PUBLIC__/index/files/jquery.js"></script>
<script src="__PUBLIC__/index/files/jquery-weui.js"></script>
<script src="__PUBLIC__/index/files/cropper.js"></script>
<script src="__PUBLIC__/index/files/myCrop.js"></script>
<script type="text/javascript">
    var ishttps = 'https:' == document.location.protocol ? true: false;
    if(ishttps){
        document.write("<script src='https://static.app1.magcloud.net/public/static/dest/js/libs/magjs-x.js'><\/script>");
    }else{
        document.write("<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'><\/script>");
    }
</script>
<script src="%E7%94%9F%E6%88%90%E6%B5%B7%E6%8A%A5_files/magjs-x.js"></script>
<!-- <script src="__PUBLIC__/index/js/jquery-3.1.1.min.js"></script> -->
<script src="__PUBLIC__/index/js/html2canvas.js"></script>
<script type="text/javascript">

    var fileImg = "";

    var img = '__PUBLIC__/index/files/1519455562113416242.jpg';

    //var img = images.split(',');
    $('#photo-btn').click(function(){
        $('#photo').popup();
    });
    $('#photo_btn_2').click(function(){
        $('#photo').popup();
    });



    //if (img.length < 2){
       // $('.qiehuan').hide();
    //}

    change_resize();
    //alert($(window).width());
    function change_resize(){

        var width = $(window).width();
        if(width>640){
            width = 640;
        }
        var ratio = width/375;
        $('.compute-height').each(function(i,e){
            var old_top = e.getAttribute('data-old-top');
            e.style.top = parseInt(old_top)*ratio+'px';
        });
    }

    // $('#getCroppedCanvas').click(function(){
    //     alert("1111");
    // }

    var is_post = 0,img_src = '',times = 0;
$(document).ready( function(){    
    $('#create-poster-btn').click(function(event){

    
    //     $(".button").on("click", function(event) {    
                event.preventDefault();    
                html2canvas(document.getElementById("generate"), {    
                allowTaint: true,    
                taintTest: false,    
                onrendered: function(canvas) {    
                    canvas.id = "mycanvas";    
                    //生成base64图片数据    
                    var dataUrl = canvas.toDataURL();    
                    // var newImg = document.createElement("img");    
                    // newImg.src =  dataUrl;    
                    // document.body.appendChild(newImg);    
                }    
            });


            mag.setData({
              shareData: {
                  type: 1,
                  imageurl: '分享图片链接',
                  picurl:  dataUrl   //4.0.9起不需要再设置picurl
                }
            });


    //     });     
         

        //$.alert('暂未完成...');
        //return false;
        // times++;
        // if(times > 5){
        //     $.alert('点击过于频繁,请稍候再尝试');
        //     return false;
        // }
        // if(is_post == 1){
        //     return false;
        // }
        // if(fileImg == ''){
        //     $.alert('还没有选择图片');
        //     return false;
        // }
        // is_post = 1;
        // $.showLoading('正在生成图片...');
        // $.post('/public/index.php/index/poster/share_image.html',{base64:fileImg,id:'3546',template:'whdz'},function(data){
        //     $.hideLoading();
        //     is_post = 0;
        //     if(data.code == 0){
        //         img_src = data.message;
        //         mag.setData({
        //             shareData: {
        //                 type: 1,
        //                 imageurl: img_src
        //             }
        //         });
        //         mag.share('ALL', function(res){
        //             // res : 平台名称
        //             /*if(res == 'WEIXIN_CIRCLE'){
        //                 $.post('/public/index.php/index/poster/ajax_add_vote.html',{res:res,id:'15',p_id:'3546'},function(data){
        //                     //if(data.code != 0){
        //                         $.alert(data.message);
        //                     //}
        //                 },'json');
        //             }else{
        //                 $.alert('您分享的不是朋友圈');
        //             }*/
        //         });
        //     }else{
        //         $.alert('图片生成失败,原因:'+data.message);
        //     }
        // },'json');
    });

});








</script>

</body></html>